<template>
	<div class="content">
		<RadioGroup v-model="appointValue" vertical>
			<Radio :label="rest" border class="radio"></Radio>
			<RadioGroup v-model="restReason" vertical v-show="rest === appointValue" class="reason">
				<Radio :label="rest_1" border class="radio"></Radio>
				<Radio :label="rest_2" border class="radio"></Radio>
				<Radio :label="rest_3" border class="radio"></Radio>
				<Radio :label="rest_4" border class="radio"></Radio>
			</RadioGroup>
			<Radio :label="finishing" border class="radio"></Radio>
			<Radio :label="other" border class="radio"></Radio>
		</RadioGroup>
	</div>
</template>

<script>
import Vue from 'vue';
import i18n from '../../../static/lang/i18n';
/*const enableAppointStates = ['notReady', 'afterWork', 'otherWork'];*/
export default {
	name: 'Appointment',
	data() {
		return {
			appointValue: null,
			rest: null,
			restReason: null,
			other: null,
			finishing: null,
			rest_1: null,
			rest_2: null,
			rest_3: null,
			rest_4: null
		};
	},
	mounted() {
		// eslint-disable-next-line no-undef
		let Constructor = Vue.extend(module.default);
		let vm = new Constructor({ el: '#app_copy', i18n });
		this.rest = vm.$t('ivcs.rest');
		this.appointValue = this.rest;
		this.restReason = vm.$t('ivcs.rest_1');
		this.other = vm.$t('ivcs.other');
		this.finishing = vm.$t('ivcs.finishing');
		this.rest_1 = vm.$t('ivcs.rest_1');
		this.rest_2 = vm.$t('ivcs.rest_2');
		this.rest_3 = vm.$t('ivcs.rest_3');
		this.rest_4 = vm.$t('ivcs.rest_4');
	}
};
</script>

<style scoped>
.radio {
	width: 100%;
	font-size: 17px;
	margin-left: 15px;
	margin-top: 10px;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;

	width: 100%;
	/*height:150px;*/
	margin-top: 20px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.reason {
	margin-left: 50px;
}
</style>
